import './ProductList.less'
import {observer} from 'mobx-react'
import {Button, Space, Form, Input, Select} from 'antd'
import React, {useEffect, useState} from 'react'
import {SearchOutlined} from '@ant-design/icons'
import {Route} from 'react-router-dom'
import TableList from './tableList'
import http from '../../../utils/http'
import './ProductList.less'
import AddGoods from '../addGoods/addGoods'
import Loading from '../../loading/loading'
import stores from '../../../mobx/index'



const ProductList = (props) => {

    const [allGoods, setAllGoods] = useState([])
    const [isLoading, setIsLoading] = useState(true)
    const [state, setState] = useState('') // state为3表示为增加
    const [Level1classify, setLevel1classify] = useState([])
    const [Level2classify, setLevel2classify] = useState({})

    // 查询数据
    const getDate = () => {
        http({
            url: '/huangyi/getAllGoods',
            method: 'get',
        }).then(res => {
            if (res.data) {
                setIsLoading(false)
            }
            setAllGoods(res.data)
        })
    }

    // 获取商品分类数据
    const getClassify = () => {
        http({
            url: '/huangyi/getClassify',
            method: 'get',
        }).then(res => {
            console.log(res)
            let obj = {}
            setLevel1classify(res?.data1?.map(v => v.name))
            res?.data1?.forEach(v1 => {
                res?.data2?.forEach(v2 => {
                    if (v1.id === v2.goods_classify_id) {
                        if (!obj[v1.name]) obj[v1.name] = []
                        obj[v1.name].push(v2.name)
                    }
                })

            })
            console.log(obj)
            setLevel2classify(obj)
        })

    }

    // 调用查询数据
    useEffect(() => {
        getDate()
        getClassify()
    }, [])

    // 从修改框返回回来携带参数
    useEffect(() => {
        setState(props.location.search.split('=')[1])
    }, [state])

    // 搜索栏组件
    const SearchForm = () => {
        // 获取表单里面的值
        const [form] = Form.useForm()

        // 点击搜索
        const searchFormValue = () => {
            console.log(form.getFieldsValue())
            http({
                url: '/huangyi/getSearch',
                method: 'get',
                data: {
                    goodsName: form.getFieldsValue().goodsName,
                    goodsState: form.getFieldsValue().goodsState === '上架' ? 1 : 0
                }
            }).then(res => {
                console.log(res)
            })
        }
        // 清空form搜索框的值
        const clearFormValue = () => {
            form.resetFields()
        }
        const [Level1, setLevel1] = React.useState([])
        const [Level2, setLevel2] = React.useState([])

        const goodsState = ['全部', '上架', '下架']

        const handleProvinceChange = value => {
            setLevel1(Level2classify[value])
            setLevel2(Level2classify[value][0])
            console.log(form.setFieldsValue({Level2classify: ''}))
        }

        const onLevel2Change = value => {
            setLevel2(value)
        }
        return (
            <Form
                form={form}
                className="search"
                style={{display: 'flex', justifyContent: 'space-around'}}
                labelCol={{span: 20}}
                labelAlign="left"
                layout="inline"
            >
                <Form.Item
                    name="goodsName"
                    label="商品名称"
                    labelCol={{span: 20}}
                    wrapperCol={{span: 18}}
                >
                    <Input
                        placeholder="请输入内容"
                        suffix={
                            <Button
                                style={{padding: 0, height: "auto"}}
                                type="link"
                                onClick={searchFormValue}
                            >
                                <SearchOutlined />
                            </Button>
                        }
                    />
                </Form.Item>

                <div style={{display: 'flex'}}>
                    <Form.Item
                        name="Level1classify"
                        className="goodsClassify"
                        label="商品分类"
                        labelCol={{span: 10}}
                        wrapperCol={{span: 15}}
                    >
                        <Select
                            placeholder="一级分类"
                            onChange={handleProvinceChange}
                            style={{width: "120px"}}
                        >
                            {Level1classify.map(v => (
                                <Select.Option key={v}>{v}</Select.Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item
                        name="Level2classify"
                        labelCol={{span: 0}}
                    >
                        <Select placeholder="二级分类"
                            value={Level2}
                            onChange={onLevel2Change}
                            style={{width: "120px"}}
                        >
                            {Level1.map(v => (
                                <Select.Option key={v}>{v}</Select.Option>
                            ))}
                        </Select>
                    </Form.Item>
                </div>
                <Form.Item
                    name="goodsState"
                    wrapperCol={{span: 18}}
                    label="商品状态"
                    labelCol={{span: 15}}
                >
                    <Select placeholder="全部">
                        {goodsState.map(v => (
                            <Select.Option key={v}>{v}</Select.Option>
                        ))}
                    </Select>
                </Form.Item>
                <Button type="link" onClick={clearFormValue} >
                    清除条件
                </Button>
            </Form>
        )
    }

    // 渲染函数
    const renderFn = () => {
        if (isLoading) {
            return (<Loading ></Loading>)
        }
        return (
            <div>

                <header className="produce_header">
                    <Space size="large">
                        <Button type="primary" onClick={addBtn}>+创建商品</Button>
                    </Space>
                </header>
                <section className="produce_content">
                    <SearchForm></SearchForm>
                    <TableList list={allGoods} {...props} getDate={getDate}></TableList>
                </section>

            </div>
        )
    }

    // 创建商品跳转
    const addBtn = () => {
        props.history.push('/admin/product/list/addGoods?edit=false')
    }


    return (
        <div className="big-card">

            <Route exact path='/admin/product/list/addGoods'><AddGoods {...props} getDate={getDate} /></Route>
            <Route exact path='/admin/product/list'>
                <div className=" produce">
                    <div className="card-header">
                        <h2>商品列表</h2>
                    </div>
                    {renderFn()}
                </div>

            </Route>
        </div>

    )

}


export default observer(ProductList)